<script setup lang="ts">
import { getPermList } from '@/api/auth';
import type { Perm } from '@/api/auth/type';
import { onMounted, ref } from 'vue';
import YAddPerm from './components/YAddPerm.vue';

const permList = ref([] as Perm[])
const onShow = ref(false);

onMounted(() => {
    getPermList().then((res) => {
        permList.value = res.data as Perm[];
    });
})

</script>

<template>
    <div class="content">
        <div class="header">
            <el-button @click="onShow = true" type="primary">添加</el-button>
        </div>
        <el-table :data="permList" style="width: 100%" stripe border>
            <el-table-column prop="name" label="权限名" />
            <el-table-column prop="code" label="权限编码" />
            <el-table-column prop="path" label="权限路径" />
            <el-table-column prop="level" label="权限级别" />
        </el-table>
        <YAddPerm v-model:on-show="onShow"></YAddPerm>
    </div>
</template>

<style lang="scss" scoped>
.content {
    background-color: white;
    padding: 1%;
    .header {
        padding: 1%;
    }
}

</style>